<script lang="ts" setup>
import { ref } from 'vue';
const props =
    defineProps({
        fields: {
            type: Array,
            default: () => {
                return [];
            },
        },
    });

const fieldsList: any[] = props.fields.map((i: any) => ({
    key: i.prop,
    label: i.label,
}))

const checkAll = ref(false)
const isIndeterminate = ref(false)
const drawerVisible = ref(false)
const tableConfig = ref<{
    [key: string]: any;
}>({
    size: 'default',
    fields: []
})

// 全选
const handleCheckAllChange = (val: boolean) => {
    tableConfig.value.fields = val ? fieldsList.map(i => i.key) : []
    isIndeterminate.value = false
}
// 设置半选状态
const handleCheckedCitiesChange = (value: string[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === fieldsList.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < fieldsList.length
}

</script>

<template>
    <el-tooltip effect="dark" content="设置表格列属性" placement="top">
        <el-button type="primary" icon="Setting" plain @click="drawerVisible = true"></el-button>
    </el-tooltip>

    <el-drawer class="header-mb-0 body-p-0" v-model="drawerVisible" title="表格设置" size="300px" append-to-body>
        <template #default>
            <el-scrollbar>
                <div class="px-6">
                    <!-- 字段设置 -->
                    <el-divider class="divider" content-position="center">
                        <el-icon>
                            <MessageBox />
                        </el-icon>
                        样式设置
                    </el-divider>
                    <div class="setting-box">
                        <div class="setting-item">
                            <span>尺寸</span>
                            <el-radio-group v-model="tableConfig.size" size="small">
                                <el-radio-button value="large">较大</el-radio-button>
                                <el-radio-button value="default">默认</el-radio-button>
                                <el-radio-button value="small">较小</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <!-- 字段设置 -->
                    <el-divider class="divider" content-position="center">
                        <el-icon>
                            <MessageBox />
                        </el-icon>
                        字段设置
                    </el-divider>
                    <div class="setting-box">
                        <div class="setting-item">
                            <div class="w-full">
                                <!-- <el-transfer v-model="formData.fields" :data="fieldsList" /> -->

                                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
                                    @change="handleCheckAllChange">
                                    全选 <span class="text-gray-600">(<span class="text-red-600">{{
                                        tableConfig.fields.length
                                            }}</span>/<span>{{ fieldsList.length
                                            }}</span>)</span>
                                </el-checkbox>
                                <el-checkbox-group v-model="tableConfig.fields" @change="handleCheckedCitiesChange">
                                    <el-row :gutter="20">
                                        <el-col :span="24" v-for="i in fieldsList" :key="i.key">
                                            <el-checkbox :label="i.label" :value="i.key" />
                                        </el-col>
                                    </el-row>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button size="small" auto-insert-space @click="drawerVisible = false">取消</el-button>
                <el-button type="primary" size="small" auto-insert-space>应用</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped lang="less">
.divider {
    margin-top: 15px;

    .el-icon {
        position: relative;
        top: 2px;
        right: 5px;
        font-size: 15px;
    }
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0;

    span {
        font-size: 14px;
    }
}
</style>